<template>
    <a @click="handler">再小点</a>
</template>

<script>
export default {
    name: 'Reduce',
    methods: {
        handler(e){
            console.log( e.target.innerHTML );
            // 通过根组件获得 emitter 对象(它是一个mitt对象)
            const x = this.$root.emitter ;
            // 触发事件
            x.emit( '减少' , 'Reduce' );
        }
    } 
}
</script>

<style scoped>
a {
    display: inline-block ;
    height: 50px ;
    line-height: 50px ;
    width: 100px ;
    text-align: center ;
    font-size: 22px;
    color: #fff ;
    margin: 5px ;
    background: #6969ff;
    border: 1px solid blue ;
    border-radius: 5px ;
    padding: 0 10px ;
    user-select: none ;
    cursor: pointer ;
}
a:hover {
    background: #1919ff;
}
</style>